<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { roleStore } from '@/stores/role'
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
// 库存数量
import SthCountBar from '@/components/PermissionsModule/Supply/components/SthCountBar.vue'
// 库存金额
import SthMoneyBar from '@/components/PermissionsModule/Supply/components/SthMoneyBar.vue'
// 入库出库数量展示
import InOutSthCountBar from '@/components/PermissionsModule/Supply/components/InOutSthCountBar.vue'
// 在制、在库、在途订单金额汇总
import MoneySummary from '@/components/PermissionsModule/Supply/components/MoneySummary.vue'
// 库存变化趋势
import GlobalInventoryTrendLine from '@/components/PermissionsModule/Supply/components/globalInventoryTrendLine.vue'

const store = roleStore() as any
const { supplyLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = supplyLevel
}
info()

// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = supplyLevel // 初始化面板权限

// 深度监听 store.supplyLevel
watch(
  () => store.supplyLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
</script>

<template>
  <Carousel class="carousel" :interval="5000">
    <!-- 库存数量(柱状图)-->
    <el-carousel-item>
      <SthCountBar :level="newRole" />
    </el-carousel-item>
    <!-- 库存金额(柱状图)-->
    <el-carousel-item>
      <SthMoneyBar :level="newRole" />
    </el-carousel-item>
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <!-- 库存变化趋势(曲线图)-->
    <el-carousel-item>
      <GlobalInventoryTrendLine :level="newRole" />
    </el-carousel-item>
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <!-- 在制、在库、在途订单金额汇总-->
    <MoneySummary :level="newRole" />
    <!-- 入库、出库数量展示-->
    <el-carousel-item>
      <InOutSthCountBar :level="newRole" />
    </el-carousel-item>
  </Carousel>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 250px;
  }
}
</style>
